// 引入折线图所需的组件
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
//引入未来一周图表库
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components';



// 封装一个函数，实现echarts图表功能
//基础折线图的图表实例，声明为全局变量
var myChart1
export function initBaseLineEcharts(chartDom, xAxisData, seriesData) {
  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

  // var chartDom = document.getElementById('main');   //此种是JavaScript中获取html文档中dom元素的方式，但是不适用于vue中
  //   var myChart = echarts.init(chartDom.value);  //vue3中获取dom元素的方式，此为第三步：访问dom
  //判断图表实例是否为空不为空进行销毁
  if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
    myChart1.dispose();
  }
  myChart1 = echarts.init(chartDom);  //chartDom代表图表的容器元素
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'line'
      }
    ]
  };

  option && myChart1.setOption(option);
}


// 封装一个函数，实现未来一周天气图功能
//未来一周天气图的图表实例，声明为全局变量（函数外部）
var myChart2
export function initTemWeekEcharts(chartDom, xAxisData, highestseriesData, lowestseriesData) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    MarkPointComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
  ]);
  // var chartDom = document.getElementById('main');
  // var myChart = echarts.init(chartDom.value);
   //判断图表实例是否为空不为空进行销毁
  if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
    myChart2.dispose();
  }
  myChart2 = echarts.init(chartDom);  //chartDom代表图表的容器元素
  var option;

  option = {
    title: {
      text: 'Temperature Change in the Coming Week'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: highestseriesData,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        type: 'line',
        data: lowestseriesData,
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        }
      }
    ]
  };

  option && myChart2.setOption(option);

}